<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>编辑资料</title>
    <link rel="stylesheet" href="../css/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/change.css">
    <link rel="stylesheet" href="../css/footer.css">
    <script type="text/javascript" src="../js/flexible.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.md5.js"></script>
    <script src="../js/comment.js"></script>
    <!--<script type="text/javascript" src="../js/cookie.js"></script>-->
</head>
<body>
<div class="header">
    <div class="back" id="back"></div>
    <p>编辑资料</p>
    <div class="save">保存</div>
</div>
<div class="box"></div>
<form class="formL">
<div class="img-box full">
    <section class=" img-section">
        <div class="z_photo upimg-div clearfix" >
         <!-- <section class="up-section fl">
                 <span class="up-span"></span>
                 <img src="../images/close.png" class="close-upimg">
                 <img src="" class="type-upimg" alt="添加标签">
                 <img src="" class="up-img">
                 <p class="img-namep"></p>
                 <input id="taglocation" name="taglocation" value="" type="hidden">
                 <input id="tags" name="tags" value="" type="hidden">
             </section>-->
            <div class="file-item">
                <div class="star-imagepath star-dash star-left star-hide"></div>
                <section class="z_file fl star-uploadbox star-uploader">
                    <div class="file" id="file"/>
                </section>
            </div>
        </div>
    </section>
</div>
<!--<div class="label">
    <ul class="clearfix">
        <li><span>青春 <i class="close"></i></span></li>
        <li><span>护士 <i class="close"></i></span></li>
        <li><span>乐于助人 <i class="close"></i></span></li>
        <li><i class="add">+</i></li>
    </ul>
</div>-->
<div class="mation">
    <h4>基本资料</h4>

       <ul id="baseInfo">
           <li> <label>昵称</label><input type="text" name="nickname" class="nickName" maxlength="10" placeholder="请输入昵称"></li>
           <li class="age"> <label>年龄</label><span class="ages"></span></li>
           <li class="stature"> <label>身高</label><span class="height"></span></li>
           <li class="weight"> <label>体重</label><span class="weiN"></span></li>
           <li class="constellation"> <label>星座</label><span class="constel"></span></li>
           <li> <label>个人说明</label><input type="text" name="infomation" class="infos"></li>
       </ul>

    <h4>详细资料</h4>
        <ul id="detailInfo">
            <li class="intimacy"> <label>亲密行为</label><span class="intima"></span> </li>
            <li class="friend"> <label>现实交友</label><span class="friA"></span></li>
            <li class="loveinte"> <label>喜爱类型</label><span class="love"></span></li>
            <li class="objective"> <label>交友目的</label><span class="objectT"></span></li>
        </ul>
</div>
</form>
<!--年龄弹框-->
<div class="tapNum" id="tapNum">
    <div class="title">
      <p><span class="calc">取消</span></p>
      <p><span class="finish">完成</span></p>
    </div>
    <ul class="listA" id="lists">
   <!-- <li data-value="18" class="checks">18</li>
    <li data-value="19" class="checks">19</li>
    <li data-value="20" class="checks">20</li>
    <li data-value="21" class="checks">21</li>
    <li data-value="22" class="checks">22</li>
    <li data-value="23" class="checks">23</li>
    <li data-value="24" class="checks">24</li>
    <li data-value="25" class="checks">25</li>-->
</ul>

</div>
<!--身高弹框-->
<div class="tapNum" id="heiNum">
    <div class="title">
        <p><span class="calc">取消</span></p>
        <p><span class="finish finishs">完成</span></p>
    </div>

    <ul class="listB" id="heiLists">
        <!-- <li data-value="18" class="checks">18</li>
         <li data-value="19" class="checks">19</li>
         <li data-value="20" class="checks">20</li>
         <li data-value="21" class="checks">21</li>
         <li data-value="22" class="checks">22</li>
         <li data-value="23" class="checks">23</li>
         <li data-value="24" class="checks">24</li>
         <li data-value="25" class="checks">25</li>-->
    </ul>
</div>
<!--体重弹框-->
<div class="tapNum" id="weiNum">
    <div class="title">
        <p><span class="calc">取消</span></p>
        <p><span class="finish finishs">完成</span></p>
    </div>

    <ul class="listC" id="weiLists">
        <!-- <li data-value="18" class="checks">18</li>
         <li data-value="19" class="checks">19</li>
         <li data-value="20" class="checks">20</li>
         <li data-value="21" class="checks">21</li>
         <li data-value="22" class="checks">22</li>
         <li data-value="23" class="checks">23</li>
         <li data-value="24" class="checks">24</li>
         <li data-value="25" class="checks">25</li>-->
    </ul>
</div>
<!--星座弹框-->
<div class="tapNum" id="constelNum">
    <div class="title">
        <p><span class="calc">取消</span></p>
        <p><span class="finish">完成</span></p>
    </div>

    <ul class="listD" id="constelLists">
        <!-- <li data-value="18" class="checks">18</li>
         <li data-value="19" class="checks">19</li>
         <li data-value="20" class="checks">20</li>
         <li data-value="21" class="checks">21</li>
         <li data-value="22" class="checks">22</li>
         <li data-value="23" class="checks">23</li>
         <li data-value="24" class="checks">24</li>
         <li data-value="25" class="checks">25</li>-->
    </ul>
</div>
<!--亲密行为弹框-->
<div class="tapNum" id="intiNum">
    <div class="title">
        <p><span class="calc">取消</span></p>
        <p><span class="finish finishs">完成</span></p>
    </div>

    <ul class="listE" id="intiLists">
        <!-- <li data-value="18" class="checks">18</li>
         <li data-value="19" class="checks">19</li>
         <li data-value="20" class="checks">20</li>
         <li data-value="21" class="checks">21</li>
         <li data-value="22" class="checks">22</li>
         <li data-value="23" class="checks">23</li>
         <li data-value="24" class="checks">24</li>
         <li data-value="25" class="checks">25</li>-->
    </ul>
</div>
<!--现实交友弹框-->
<div class="tapNum" id="friendNum">
    <div class="title">
        <p><span class="calc">取消</span></p>
        <p><span class="finish">完成</span></p>
    </div>

    <ul class="listF" id="friLists">
        <!-- <li data-value="18" class="checks">18</li>
         <li data-value="19" class="checks">19</li>
         <li data-value="20" class="checks">20</li>
         <li data-value="21" class="checks">21</li>
         <li data-value="22" class="checks">22</li>
         <li data-value="23" class="checks">23</li>
         <li data-value="24" class="checks">24</li>
         <li data-value="25" class="checks">25</li>-->
    </ul>
</div>
<!--喜欢类型弹框-->
<div class="tapNum" id="loveNum">
    <div class="title">
        <p><span class="calc">取消</span></p>
        <p><span class="finish">完成</span></p>
    </div>

    <ul class="listG" id="loveLists">
        <!-- <li data-value="18" class="checks">18</li>
         <li data-value="19" class="checks">19</li>
         <li data-value="20" class="checks">20</li>
         <li data-value="21" class="checks">21</li>
         <li data-value="22" class="checks">22</li>
         <li data-value="23" class="checks">23</li>
         <li data-value="24" class="checks">24</li>
         <li data-value="25" class="checks">25</li>-->
    </ul>
</div>
<!--交友目的弹框-->
<div class="tapNum" id="objectNum">
    <div class="title">
        <p><span class="calc">取消</span></p>
        <p><span class="finish">完成</span></p>
    </div>

    <ul class="listH" id="objectiveLists">
        <!-- <li data-value="18" class="checks">18</li>
         <li data-value="19" class="checks">19</li>
         <li data-value="20" class="checks">20</li>
         <li data-value="21" class="checks">21</li>
         <li data-value="22" class="checks">22</li>
         <li data-value="23" class="checks">23</li>
         <li data-value="24" class="checks">24</li>
         <li data-value="25" class="checks">25</li>-->
    </ul>
</div>
<script type="text/javascript" src="../js/base.js"></script>
<script src="../js/login.js"></script>
<script type="text/javascript" src="../libs/qiniu/pupload/moxie.js"></script>
<script type="text/javascript" src="../libs/qiniu/qiniu.cs.js"></script>
<script type="text/javascript" src="../libs/qiniu/pupload/pupload.cs.js"></script>

<script type="text/javascript">
    $(function(){
        $("#back").click(function(){
            window.history.back();
        });
        var uploaded;
        var uploadHtml;
        $(".file").each(handleFun);

        function handleFun(){
            var _this = this;
            //标记是否上传完成，未完成则不能提交表单

            var url = IMAGUP;
            var time = new Date().getTime();
            var param = {keys:[{key:$.md5('h5'+time), width:"80", height:"80", needFussy:"1"} ]};
            uploadHtml = $(this).parents(".file-item").clone(true);

            $.ajax({
                url: url,
                type: 'POST',
                dataType:'json',
                data:JSON.stringify(param),
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("ts", time);
                    xhr.setRequestHeader("mn", "3");
                    xhr.setRequestHeader("version","1.0");
                    xhr.setRequestHeader("sign", $.md5('ts='+ time +'&mn=3&imei=null&version=1.0&param='+JSON.stringify(param)))
                },
                async: false,
                cache: false,
                contentType: 'application/json;charset=UTF-8',
                success: function (data) {
                    console.log(data);
                    var uptoken = data.data.token[0].token;
                    var keyNum =data.data.token[0].key;
                    var img_url = data.data.token[0].url;
                    var img_url_t = data.data.token[0].url_t;

                    var thisId   = $(_this).attr('id');
                    var pNode    = $(_this).parent('section')[0];// browse_button的父级元素
                    var rNode    = $(pNode).parent('div');
                    var uploader = Qiniu.uploader({
                        runtimes: 'html5,flash,html4',
                        browse_button: thisId,
                        container: pNode,
                        drop_element:pNode,
                        max_file_size: '100mb',
                        flash_swf_url: '../libs/qiniu/plupload/Moxie.swf',
                        max_retries: 3,
                        dragdrop: true,
                        chunk_size: '4mb',
                        uptoken:uptoken,
                        domain: 'http://asimg.youyuzone.com',
                        auto_start: true,
                        init: {
                            'FilesAdded': function(up, files) {

                            },
                            'BeforeUpload': function(up, file) {
                                uploaded = false;
                            },
                            'UploadProgress': function(up, file) {

                            },
                            'UploadComplete': function(uploader, fileinfo, retinfo) {
                                     console.log(fileinfo);
                            },
                            'FileUploaded': function(uploader, fileinfo, retinfo) {
                                retinfo = $.parseJSON(retinfo);
                                var preview     = [];
                                var url = img_url;
                                var previewhtml = '<img src="' + img_url + '"/>';
                                preview.push('<div class="star-imagepreview" data-id="' + fileinfo.id + '"><span class="remove-img" title="点击删除当前项"></span><input type="hidden" name="uploadImg[]" value="' + url + '" class="fileImg"><input type="hidden" name="uploadImgFrame[]" value="' + img_url_t + '">' + previewhtml + '</div>');
                                $('.star-imagepath', rNode).html($(preview.join('') + '<div class="star-clear"></div>'));
                                $('.star-uploader', rNode).remove();
                                $('.star-imagepath').show();
                              /*  var imgUp =$("input[name='uploadImg[]']");
                                for ( m in imgUp){
                                    imgFile.push(imgUp[m].value);
                                    /!*     return imgFile;*!/
                                }
                                console.log(imgFile)  ;*/
                                if(retinfo){
                                    if($(".file-item").size() <4){
                                        $(".z_photo").append(uploadHtml);
                                        $(".file").each(handleFun);
                                    }
                                }

                                uploaded = true;
                            },
                            'Error': function(up, err, errTip) {
//                                console.log(err);
                            },
                            'Key': function(up, file) {
                                // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
                                // 该配置必须要在unique_names: false，save_key: false时才生效
                                var key = keyNum;
                                // do something with key here
                                return key;
                            }
                        }
                    });
                },
                error:function(res){

                }
            });

        };
        $('.z_photo').delegate('.remove-img', 'click', function(){
            var _that = this;
            $(_that).parents(".file-item").remove();

            if($(".file-item").size() <4 && !($(".z_photo").find('div.file').html())){
                $(".z_photo").append(uploadHtml);
            }

        });

    });

</script>
<script type="text/javascript" src="../js/fromS.js"></script>
</body>
</html>